<!--  -->
<template>
  <div class="maxbg">
    <transition name="fade">
      <div class="pageBody">
        <div class="dt-top">
          <div class="logo"></div>
          <div class="down-btn" @click="linkCourse">下载APP</div>
        </div>
        <div class="v-main">
          <div class="v-head" v-if="isLogin">
            <div class="v-tl">会员中心</div>
            <div class="service" id="service"></div>
            <div class="v-user">
              <div class="v-user-img">
                <img :src="isCover(userData.avatar)" />
              </div>
              <div>
                <div class="v-user-name">{{ userData.nickname }}</div>
                <div class="v-user-tip">开通芝士医生会员，畅想好内容</div>
              </div>
            </div>
          </div>
          <div class="v-ct" :class="[isLogin ? '' : 'mg-top']">
            <div class="v-card-box">
              <template v-for="(item, index) in cardList">
                <div
                  class="v-card"
                  :class="selectItem == index ? 'on' : ''"
                  @click="selectItem = index"
                >
                  <div class="card-type">{{ item.name }}</div>
                  <div class="card-money">
                    <span class="icon">¥&nbsp;</span
                    >{{ item.currentPrice / 1000 }}
                  </div>
                  <div class="card-dis">
                    ¥&nbsp;{{ item.originalPrice / 1000 }}
                  </div>
                  <div class="card-num">立省¥{{ item.timeLimit }}</div>
                  <div class="recommend" v-if="item.recommend">推荐</div>
                </div>
              </template>
            </div>
            <div class="card-btn" @click="buyVip" v-if="isLogin">
              {{ isVip ? "会员续费" : "确认协议并开通会员" }}
            </div>
            <div class="card-btn" @click="gotoLogin" v-else>开通会员</div>
            <div class="agree-ruls" v-if="isLogin">
              <span
                class="check"
                :class="[isCheck ? 'on' : '']"
                @click="agreeRules"
                >我已阅读并同意</span
              ><span class="o" @click="gotoUserRules">《用户使用协议》</span>
            </div>
            <div class="card-foot">
              <div class="card-ft-main">
                <div class="ft-tl">优选会员权益</div>
                <div class="ft-box">
                  <template v-for="(item, index) in vipList">
                    <div class="ft-gp">
                      <div class="ft-img">
                        <img :src="iconList[index]" />
                      </div>
                      <div class="ft-gp-tl">{{ item.title }}</div>
                      <div class="ft-tx">{{ item.desc }}</div>
                    </div>
                  </template>
                </div>
                <div class="ai-box">
                  <div class="ai-gp">
                    <div class="ai-tl">AI智能导师权益</div>
                    <div class="ai-infor">
                      <div class="ai-card">
                        <div class="ai-card-tl">VIP月卡</div>
                        <div class="ai-card-tx">
                          <span class="o">100次/月</span>对话权益
                        </div>
                      </div>
                      <div class="ai-card">
                        <div class="ai-card-tl">VIP季卡</div>
                        <div class="ai-card-tx">
                          <span class="o">100次/月</span>对话权益，共<span
                            class="o"
                            >300</span
                          >次
                        </div>
                      </div>
                      <div class="ai-card">
                        <div class="ai-card-tl">VIP年卡</div>
                        <div class="ai-card-tx">
                          <span class="o">100次/月</span>对话权益，共<span
                            class="o"
                            >1200</span
                          >次
                        </div>
                      </div>
                    </div>
                    <div class="ai-tip">
                      <p>注意：</p>
                      <p>
                        1.
                        对于季卡、年卡当月次数如果没有用完，次数不会累积到下个月；
                      </p>
                      <p>
                        2.
                        对于季卡、年卡，都以月度周期做限制，月度周期限制100次对话（30天/月度周期）
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
  <div class="mask" v-if="isShowModal">
    <div class="modal">
      <div class="moadl-tl">请阅读并同意一下条款</div>
      <div class="modal-tx">
        我已阅读并同意<span class="o" @click="agreeRules"
          >《用户使用协议》</span
        >
      </div>
      <div
        class="modal-btn"
        @click="
          isShowModal = false;
          isCheck = true;
        "
      >
        同意并继续
      </div>
    </div>
  </div>

  <div class="mask" v-if="isBuyOk">
    <div class="modal">
      <div class="moadl-tl">提示</div>
      <div class="modal-tx">开通成功，请前往APP享受<br />会员权益</div>
      <div class="modal-btn" @click="goback">知道了</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardIdx: 1,
      userData: {},
      isVip: false,
      iconList: [
        new URL("../assets/images/vip/vip_1.png", import.meta.url).href,
        new URL("../assets/images/vip/vip_2.png", import.meta.url).href,
        new URL("../assets/images/vip/vip_3.png", import.meta.url).href,
        new URL("../assets/images/vip/vip_4.png", import.meta.url).href,
      ],
      vipList: [],
      cardList: [],
      selectItem: 1,
      isCheck: false,
      isShowModal: false,
      isBuyOk: false,
      isLogin: false,
    };
  },
  components: {},
  created() {
    this.init();
    this.getService();
    this.getUserInfo();
    this.getUserVipInfor();
  },
  mounted() {
    this.$nextTick(() => {
      this.getEquityList(); //查询会员权益列表
      this.getMemberCardList(); //查询会员卡类型列表
    });
  },
  methods: {
    buyVip() {
      if (!this.isCheck) {
        this.isCode = false;
        this.isShowModal = true;
        return;
      }
      const code = this.$route.query.invitationCode
        ? this.$route.query.invitationCode
        : "";
      this.$router.push({
        path: "/pay",
        query: {
          type: 1,
          id: this.cardList[this.selectItem].cardId,
          invitationCode: code,
          actionType: 4,
        },
      });
    },
    agreeRules() {
      this.isCheck = !this.isCheck;
    },
    getUserInfo() {
      this.$http
        .getUserInfor()
        .then((res) => {
          if (res.flag == 0) {
            this.userData = res.data || {};
            // this.tabsIndex = this.$route.query.type || 1;
            localStorage.setItem("userInfo", JSON.stringify(res.data));
            this.isLogin = true;
            // this.$store.state.userInfoChange = true;
          }
        })
        .catch((err) => {
          if (err.response.status == 401) {
            this.isLogin = false;
          }
        });
    },
    getUserVipInfor() {
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.userInfo = userInfo || {};
      this.$http
        .getUserHalo()
        .then((res) => {
          if (res.flag == 0) {
            for (var i = 0; i < res.data.length; i++) {
              if (res.data[i].code == 1) {
                const newTime = new Date().getTime();
                if (newTime <= res.data[i].expiration) {
                  this.isVip = true;
                  const time = res.data[i].expiration;
                  localStorage.setItem("isVip", true);
                  //   this.time = this.$public.getDate(time).split(" ")[0];
                }
              }
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    isCover(url) {
      let path = "";
      if (!url) {
        return path;
      }
      if (url.indexOf("https://") != -1) {
        path = url;
      } else {
        path = "https://i.zmylschool.com" + url;
      }
      return path;
    },
    getEquityList() {
      this.$http
        .getEquityList()
        .then((res) => {
          if (res.flag == 0) {
            this.vipList = res.data || [];
          }
        })
        .catch((err) => {
          //   ElMessage.error(err.response.data.message);
        });
    },
    getMemberCardList() {
      this.$http
        .getMemberCardList()
        .then((res) => {
          if (res.flag == 0) {
            this.cardList = res.data || [];
            const id = (this.$route.query.id ? this.$route.query.id : 3) - 1;
            this.selectItem = id;

            // var idx = this.cardList.findIndex((i) => i.recommend);
            // if (idx != -1) {
            //   this.selectItem = idx;
            // } else {
            //   this.selectItem = 0;
            // }
            // this.vipPlaceOrder(); //生成订单
          }
        })
        .catch((err) => {
          //   ElMessage.error(err.response.data.message);
        });
    },
    getService() {
      const s = document.createElement("script");
      s.src =
        "https://wp.qiye.qq.com/qidian/2355051443/59988da33997511cd8e93fb26f4f6c72";
      s.id = "qd235505144359988da33997511cd8e93fb26f4f6c72";
      s.charset = "utf-8";
      s.async;
      s.defer;
    },
    init() {
      const s = document.createElement("script");
      s.type = "text/javascript";
      s.src = "//web.cdn.openinstall.io/openinstall.js";
      s.addEventListener(
        "load",
        () => {
          var data = OpenInstall.parseUrlParams();
          new OpenInstall(
            {
              appKey: "zpyiil", //appkey参数配置,需要自行替换对应的appkey
              onready: function () {
                var m = this;
                /*在app已安装的情况尝试拉起app*/
                m.schemeWakeup({
                  data: data,
                  channelCode: "test-channelcode",
                });
                window.wakeupOrInstall = function () {
                  this.rnum = this.rnum + 1;
                  m.wakeupOrInstall({
                    data: data,
                    channelCode: "test-channelcode",
                  });
                };
              },
            },
            data
          );
        },
        false
      );
      document.head.appendChild(s);
    },
    linkCourse() {
      // alert('下载课程')
      // console.log(1212)
      window.wakeupOrInstall(); //此方法为scheme、Universal Link唤醒以及引导下载的作用（必须调用且不可额外自行跳转下载）
      return false;
    },
    gotoLogin() {
      const code = this.$route.query.invitationCode
        ? this.$route.query.invitationCode
        : "";
      const type = this.$route.query.type ? this.$route.query.type : "";
      const actionType = this.$route.query.actionType
        ? this.$route.query.actionType
        : "";
      this.$router.push({
        path: "/login",
        query: { actionType: actionType, invitationCode: code, type: type },
      });
    },
    // getUserInfor() {
    //   const userInfo = JSON.parse(localStorage.getItem("userInfo"));
    //   this.userInfo = userInfo || {};
    //   this.$http
    //     .getUserHalo()
    //     .then((res) => {
    //       if (res.flag == 0) {
    //         for (var i = 0; i < res.data.length; i++) {
    //           if (res.data[i].code == 1) {
    //             const newTime = new Date().getTime();
    //             if (newTime <= res.data[i].expiration) {
    //               this.isVip = true;
    //               const time = res.data[i].expiration;
    //               this.time = this.$public.getDate(time).split(" ")[0];
    //             }
    //           }
    //         }
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
  },
};
</script>

<style lang='scss' scoped>
.mg-top {
  margin-top: 0.96rem;
  border-radius: 0;
}
</style>
